Angular-এ চাইল্ড রাউটস একটি শক্তিশালী রাউটিং কনফিগারেশন যা একটি রুটের (প্যারেন্ট রুট) অধীনে সাব-রুট (চাইল্ড রুট) তৈরি করতে সাহায্য করে। এটি Nested Routing বা Nested Views তৈরি করার একটি উপায়, যার মাধ্যমে আপনি একটি পেজের মধ্যে একাধিক ভিউ লোড করতে পারেন।

এটি বিশেষত তখন ব্যবহৃত হয় যখন আপনাকে একাধিক কম্পোনেন্ট একে অপরের মধ্যে লোড করতে হয়, এবং একে অপরের সাথে সম্পর্কিত কনটেন্ট শো করতে হয়।

চাইল্ড রাউটস কী?

চাইল্ড রাউটস হলো মূল রুটের অধীনে সাব-রুটের সংজ্ঞা, যেগুলিকে মূল রুটের ভিউতে নেস্টেড (nested) হিসেবে দেখানো হয়। চাইল্ড রাউটস ব্যবহারের মাধ্যমে আপনি একটি কম্পোনেন্টের মধ্যে আরও অনেক কম্পোনেন্ট লোড করতে পারবেন, যেমন ড্যাশবোর্ডে বিভিন্ন সেকশন (Overview, Reports, Settings) থাকতে পারে, যেগুলোর প্রতিটির জন্য আলাদা রাউট কনফিগারেশন থাকবে।

চাইল্ড রাউটস কনফিগারেশন

চাইল্ড রাউটস তৈরি করতে হলে, প্রথমে আপনাকে প্যারেন্ট রাউট তৈরি করতে হবে এবং তারপরে সেটির অধীনে চাইল্ড রাউটস কনফিগার করতে হবে। উদাহরণস্বরূপ:

প্যারেন্ট রাউট কনফিগারেশন

ধরা যাক, আমাদের একটি ড্যাশবোর্ড পেজ রয়েছে এবং তার অধীনে বিভিন্ন চাইল্ড রাউটস রয়েছে, যেমন "Overview", "Reports", এবং "Settings"।

1. প্রথমে, AppRoutingModule এ প্যারেন্ট রাউট এবং চাইল্ড রাউট কনফিগার করতে হবে।

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { OverviewComponent } from './dashboard/overview/overview.component';
import { ReportsComponent } from './dashboard/reports/reports.component';
import { SettingsComponent } from './dashboard/settings/settings.component';

const routes: Routes = [
  {
    path: 'dashboard', component: DashboardComponent, children: [
      { path: '', component: OverviewComponent },      // Default child route
      { path: 'overview', component: OverviewComponent },
      { path: 'reports', component: ReportsComponent },
      { path: 'settings', component: SettingsComponent }
    ]
  },
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

এখানে:

• DashboardComponent হলো প্যারেন্ট রুট, এবং এটি চাইল্ড রাউটগুলিকে ধারণ করবে।
• children অ্যারে ভিতরে চাইল্ড রাউটস কনফিগার করা হয়েছে:
  • /dashboard/overview এর জন্য OverviewComponent
  • /dashboard/reports এর জন্য ReportsComponent
  • /dashboard/settings এর জন্য SettingsComponent

DashboardComponent এর HTML (টেমপ্লেট)

প্যারেন্ট কম্পোনেন্টে router-outlet ব্যবহার করতে হবে যেখানে চাইল্ড কম্পোনেন্টগুলো লোড হবে।

<!-- dashboard.component.html -->
<h2>Welcome to the Dashboard!</h2>
<nav>
  <a routerLink="overview">Overview</a>
  <a routerLink="reports">Reports</a>
  <a routerLink="settings">Settings</a>
</nav>
<router-outlet></router-outlet>

এখানে, routerLink এর মাধ্যমে চাইল্ড রাউটসের মধ্যে নেভিগেট করা হচ্ছে এবং router-outlet এর মাধ্যমে সেই কম্পোনেন্টটি রেন্ডার হবে।

চাইল্ড রাউটসের সুবিধা

1. Nested Views: চাইল্ড রাউটস ব্যবহার করে আপনি একাধিক ভিউকে একই পেজে নেস্ট করতে পারেন। যেমন, একটি ড্যাশবোর্ডে বিভিন্ন সেকশন বা ট্যাব।
2. ইন্টারনাল নেভিগেশন: চাইল্ড রাউটস সাধারণত প্যারেন্ট রাউটের সাথে সম্পর্কিত থাকে, ফলে ভিন্ন ভিন্ন পেজের মধ্যে সহজে নেভিগেট করা সম্ভব হয়।
3. অলিম্পিক স্ট্রাকচার: চাইল্ড রাউটস ব্যবহারের মাধ্যমে অ্যাপ্লিকেশনের রাউটিং কাঠামো আরও পরিষ্কার এবং কাঠামোবদ্ধ হয়। এতে কম্পোনেন্টের হায়ারার্কি স্পষ্ট থাকে।
4. Lazy Loading: চাইল্ড রাউটসের সাথে lazy loading কনফিগার করাও সম্ভব, যা অ্যাপ্লিকেশনের পারফরমেন্স উন্নত করতে সাহায্য করে। শুধুমাত্র যখন চাইল্ড রাউটটি অ্যাক্সেস করা হবে, তখনই সেই কম্পোনেন্ট বা মডিউল লোড হবে।

চাইল্ড রাউটসের উদাহরণ

এখানে আরও একটি উদাহরণ দেওয়া হলো যেখানে, একটি প্যারেন্ট কম্পোনেন্ট ProductComponent এবং তার অধীনে কয়েকটি চাইল্ড রাউট রয়েছে, যেমন "Product List", "Product Detail" ইত্যাদি।

const routes: Routes = [
  {
    path: 'products', component: ProductComponent, children: [
      { path: '', component: ProductListComponent },       // Default route
      { path: 'list', component: ProductListComponent },
      { path: 'detail/:id', component: ProductDetailComponent }
    ]
  }
];

এখানে ProductComponent প্যারেন্ট কম্পোনেন্ট হিসেবে কাজ করবে এবং তার অধীনে ProductListComponent এবং ProductDetailComponent চাইল্ড রাউট হিসেবে কনফিগার করা হয়েছে।

চাইল্ড রাউটসে ডাইনামিক প্যারামিটার

চাইল্ড রাউটসেও আপনি ডাইনামিক প্যারামিটার ব্যবহার করতে পারেন, যেমন :id এর মাধ্যমে একটি নির্দিষ্ট প্রোডাক্টের ডিটেইলস দেখানো যেতে পারে।

{ path: 'detail/:id', component: ProductDetailComponent }

এটি ProductDetailComponent কে id প্যারামিটার গ্রহণ করার অনুমতি দেয়, এবং সেই প্যারামিটার ব্যবহার করে উপযুক্ত ডেটা লোড করা সম্ভব হয়।

উপসংহার

Angular-এ চাইল্ড রাউটস ব্যবহারের মাধ্যমে আপনি একটি প্যারেন্ট রুটের অধীনে একাধিক সাব-রুট (চাইল্ড রুট) কনফিগার করতে পারেন। এটি nested views তৈরি করতে সাহায্য করে এবং অ্যাপ্লিকেশনের রাউটিং কাঠামোকে আরও মডুলার এবং স্কেলেবল করে তোলে।